import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter_massage/common_lib/extension/ex_widget.dart';
import 'package:flutter_massage/common_lib/index.dart';
import 'package:flutter_massage/common_lib/routers/route.dart';
import 'package:flutter_massage/common_lib/ui/common_component.dart';
import 'package:flutter_massage/generated/assets.dart';
import 'package:flutter_massage/pages/my/address/my_address_page.dart';
import 'package:flutter_massage/pages/my/attention/my_attention_page.dart';
import 'package:flutter_massage/pages/my/my_logic.dart';
import 'package:flutter_massage/pages/my/order/my_order_page.dart';
import 'package:flutter_massage/pages/my/setting/setting_page.dart';
import 'package:flutter_massage/pages/my/wallet/my_wallet_page.dart';
import 'package:flutter_massage/pages/web/web_view.dart';
import 'package:flutter_massage/service/index.dart';
import 'package:flutter_massage/values/index.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

class MyPage extends StatefulWidget {
  const MyPage({super.key});

  @override
  State<MyPage> createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> with AutomaticKeepAliveClientMixin {
  @override
  Widget build(BuildContext context) {
    super.build(context);
    return const _MyComponent();
  }

  @override
  bool get wantKeepAlive => true;
}

class _MyComponent extends GetView<MyLogic> {
  const _MyComponent();

  @override
  Widget build(BuildContext context) {
    return GetBuilder<MyLogic>(
      assignId: true,
      init: MyLogic(),
      builder: (logic) {
        return BaseScaffold(
          hideBackBtn: true,
          child: SingleChildScrollView(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                _buildBg(),
                _buildSectionOne().paddingTop(8.w),
                _buildCustomer().paddingTop(20.w),
                _buildItem(
                  icon: Assets.svgMyHelp,
                  title: '操作帮助',
                  onTap: () => CommonRoute.openProtocolPage(),
                ),
                _buildItem(
                  icon: Assets.svgMyAgreement,
                  title: '用户协议',
                  onTap: () => CommonRoute.openProtocolPage(),
                ),
                _buildItem(
                  icon: Assets.svgMyPrivacy,
                  title: '隐私政策',
                  onTap: () => CommonRoute.openPrivacyPage(),
                ),
                _buildItem(
                  icon: Assets.svgMySetting,
                  title: '设置',
                  onTap: () => CommonRoute.open(const SettingPage()),
                ),
              ],
            ),
          ),
        );
      },
    );
  }

  Widget _buildItem({
    required String icon,
    required String title,
    required VoidCallback onTap,
  }) {
    return CommonItemComponent(
      CommonItemBean(icon: icon, title: title, onTap: onTap),
      arrowWidth: 10.w,
      itemHeight: 50.w,
      padding: EdgeInsets.symmetric(horizontal: 16.w),
      iconTitleMargin: 8.w,
      iconSize: 24.w,
      titleFontSize: 15,
      titleFontWeight: FontWeight.bold,
      hasLine: false,
    );
  }

  Widget _buildCustomer() {
    return ButtonWidget(
      onTap: () async {
        SettingBean bean = await XydUserService.getCacheMineInfoBean();
        if (bean.chatUrl.empty) return;
        CommonRoute.open(WebH5Page(url: bean.chatUrl!));
      },
      child: Stack(
        alignment: Alignment.centerRight,
        children: [
          const FractionallySizedBox(
            widthFactor: 1,
            child: AspectRatio(
              aspectRatio: 5.72,
              child: IconWidget.image(Assets.imageMyCustomer, fit: BoxFit.cover),
            ),
          ),
          Row(
            children: [
              const TextWidget.oneLine(
                text: '全国24小时在线客服',
                fontSize: 17,
                color: AppColors.textLevelOne,
                fontWeight: FontWeight.bold,
              ).expanded(),
              ButtonWidget.text(
                '发起咨询',
                fontSize: 12,
                fontWeight: FontWeight.bold,
                textColor: AppColors.white,
                width: 70.w,
                height: 28.w,
                borderRadius: 28.w,
                alignment: Alignment.center,
                gradient: CommonDecoration.xydGradient,
                hasInkWell: false,
              ),
            ],
          ).paddingHorizontal(20.w),
        ],
      ).paddingHorizontal(16.w),
    );
  }

  Widget _buildSectionOne() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: [
        _buildSectionOneItem(
          icon: Assets.svgMyAttention,
          title: '我的关注',
          onTap: () => CommonRoute.open(const MyAttentionPage()),
        ),
        _buildSectionOneItem(
          icon: Assets.svgMyAddress,
          title: '我的地址',
          onTap: () => CommonRoute.open(const MyAddressPage()),
        ),
        _buildSectionOneItem(
          icon: Assets.svgMyOrder,
          title: '我的订单',
          onTap: () => CommonRoute.open(const MyOrderPage()),
        ),
        _buildSectionOneItem(
          icon: Assets.svgWallet,
          title: '我的钱包',
          onTap: () => CommonRoute.open(const MyWalletPage()),
        ),
      ],
    );
  }

  Widget _buildSectionOneItem({
    required String icon,
    required String title,
    required VoidCallback onTap,
  }) {
    return ButtonWidget(
      onTap: onTap,
      hasInkWell: false,
      child: Column(
        children: [
          icon.toSvg(width: 22.w),
          TextWidget.oneLine(text: title, fontSize: 13, color: AppColors.textLevelOne).paddingTop(4.w),
        ],
      ),
    );
  }

  Widget _buildBg() {
    return Stack(
      alignment: Alignment.bottomCenter,
      children: [
        IconWidget.image(
          Assets.imageMyTopBg,
          width: ScreenUtil().screenWidth,
          height: 180.w,
          fit: BoxFit.cover,
        ),
        _buildHead(),
      ],
    );
  }

  Widget _buildHead() {
    final double w = 70.w;
    String avatar = XydUserService.avatar;
    Widget avatarWidget = Container();
    bool exist = File(avatar).existsSync();
    if (exist) {
      avatarWidget = Image.file(File(avatar), fit: BoxFit.cover, width: w, height: w);
    } else {
      avatarWidget = Assets.svgMyIconPlaceholder.toSvg(width: w, height: w);
    }
    return Row(
      children: [
        ClipRRect(
          borderRadius: BorderRadius.circular(w),
          child: avatarWidget,
        ),
        TextWidget.oneLine(
          text: XydUserService.nickName,
          fontSize: 17,
          color: AppColors.textLevelOne,
          fontWeight: FontWeight.bold,
        ).paddingLeft(12.w),
      ],
    ).padding(left: 16.w, bottom: 21.w, right: 16.w);
  }
}
